<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>接口测试</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://static.bootcss.com/www/assets/css/site.min.css?v3" rel="stylesheet">
    <link href="http://static.bootcss.com/www/assets/ico/favicon.png" rel="shortcut icon">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row row-offcanvas row-offcanvas-right">
            <div class="col-xs-12 col-sm-12">
                <div class="row" >
                    <div class="col-xs-1 col-lg-4">
                        <h1>接口测试</h1>

                           <input type="button" name="add_resource" id="add_resource" value="添加资源" class="btn btn-lg btn-primary btn-block">
                        <div class="thumbnail">
                        <form class="form-signin" action="" id="myform" method="post">
                        	<b>服务器</b>:
                            <!-- <input value="<?php echo isset($_POST['url'])?$_POST['url']:'';?>" class="form-control" placeholder="填写完整地址，以http://开头" type="text" name="url" required><br> -->
                            <?php echo form_dropdown('server',array('dev'=>'开发','test'=>'测试','online'=>'正式')); ?>
                            <br/>
                            <b>请填URL</b>:
                            <!-- <input value="<?php echo isset($_POST['url'])?$_POST['url']:'';?>" class="form-control" placeholder="填写完整地址，以http://开头" type="text" name="url" required><br> -->
                            <?php echo form_dropdown('url',$urlarray); ?>
                            <a id="doc" href="" target="_blank">文档地址</a>
                            <br/>
                            <b>请求方式</b>:
                                <label><input value="get" type="radio" name="method" checked>GET</label>
                                <label><input value="post" type="radio" name="method">POST</label><br />

                            <b>参数</b>:
                            <div id="params">
                            </div>
                            <input type="button" name="add_param" id="add_param" value="添加参数" class="btn btn-lg btn-primary btn-block"><br />
                            <input type="button" name="test" id="test" value="测试" class="btn btn-lg btn-primary btn-block"><br />
                        </form>
                        </div>
                    </div>
                    <div class="col-xs-1 col-lg-8" id="result">
                  
                    </div>
                </div>
            </div>
        </div>
        <hr />
    </div>
    <div class="blog-masthead">
        <div class="container">
            <nav class="blog-nav">
                <p class="blog-nav-item">&copy; Company 2014</p>
            </nav>
        </div>
    </div>
</body>
</html>
 
<script>
    $("#add_param").click(function(){
        var input_len = $("form input").size();
        input_len++;
        $(this).before('\
            <div class="thumbnail">\
                <b>name</b>:\
                <input value="" placeholder="请填写" type="text" name="param['+ input_len +'][name]"><br>\
                <b>value</b>:\
                <input value="" placeholder="请填写" type="text" name="param['+ input_len +'][value]"><br>\
                <a href="#" onclick="del_param(this)">删除</a>\
            </div>\
        '); 
    });
    function del_param(obj) {
        $(obj).parent().remove();
    }

   
    function select(){
          $.ajax({
            type: "GET",
            url: "/Runapi/load_page/",
            data:{'url':$('select[name="url"]').find("option:selected").val()},
            dataType: "json",
            success: function(data){
                var params = data.params.split('|');
                $('#doc').attr('href',data.doc); 
                $("input[name='method'][value="+data.method+"]").attr("checked",true); 
                for (var i=0;i<params.length;i++){
                    $("#params").append('\
                        <div class="thumbnail">\
                            <b>name</b>:\
                            <input value="'+ params[i] +'" placeholder="请填写" type="text" name="param['+ i +'][name]"><br>\
                            <b>value</b>:\
                            <input value="" placeholder="请填写" type="text" name="param['+ i +'][value]"><br>\
                            <a href="#" onclick="del_param(this)">删除</a>\
                        </div>\
                    '); 
                }
            }
        });
    }
  
    $('select[name="url"]').change(function(){
        $("#params").empty();
        select();
    });

    select();

    $("#test").click(function(){
        $.ajax({
	        type: "POST",
	        url: "/Runapi/submit/",
	        data:$('#myform').serialize(),
	        dataType: "html",
	        success: function(data){
	           $('#result').html(data);
	        }
	    });
        // $(this).before('\
        //     <div class="thumbnail">\
        //         <b>参数name</b>:\
        //         <input value="" placeholder="请填写" type="text" name="param['+ input_len +'][name]"><br>\
        //         <b>参数value</b>:\
        //         <input value="" placeholder="请填写" type="text" name="param['+ input_len +'][value]"><br>\
        //         <a href="#" onclick="del_param(this)">删除</a>\
        //     </div>\
        // '); 
    });
</script>